<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>手机认证</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/footer.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <style>
        .content{padding: 15px;}
        .number{display: -webkit-box;display: box;}
        .number .left{width: 45px;line-height: 40px;font-size: 14px;}
        .number .center{-webkit-box-flex: 1;box-flex: 1;height: 40px;margin: 0 10px;}
        .number .center input{display: block;outline: none;width: 100%;border: 1px solid #ccc;height: 40px;
            text-indent: 10px;border-radius: 4px;}
        .number .right{width: 80px;line-height: 40px;font-size: 12px;color: #fff;background-color: #ffc10c;
            text-align: center;border-radius: 4px;}

        .code{margin-top: 15px;}
        .code input{display: block;outline: none;width: 100%;border: 1px solid #ccc;height: 40px;
            border-radius: 4px;text-indent: 10px;}
        .title{font-size: 13px;margin-top: 15px;color: #666;}
        .btn{}
        .btn button{display: block;width: 100%;-webkit-appearance: none;border: none;outline: none;height: 45px;color: #fff;background-color: #ffc10c;
            font-size: 18px;}
    </style>
</head>
<body>
<script src="../js/overall_mask.js"></script>
<header class="header header2">
    <div class="header-fixed">
        <div class="left">
            <a href="javascript:window.history.back();">
                <i class="iconfont icon-arrowleft"></i>
            </a>
        </div>
        <div class="center">手机认证</div>
    </div>
</header>
<div class="content">
    <div class="number">
        <div class="left">手机号</div>
        <div class="center">
            <input type="number"/>
        </div>
        <div class="right verify-btn verify-btn-no">获取验证码</div>
    </div>
    <div class="code">
        <input type="number" placeholder="验证码"/>
    </div>
    <p class="title">温馨提示：未注册账号的手机号，登录时将自动注册。</p>
</div>
<div class="btn">
    <button type="button">认证</button>
</div>
</body>
<script>

    //    短信验证按钮倒计时
    function jishi(){
        var btn = $('.verify-btn');
        if(!btn.hasClass('count')){
            var s = 60;
            btn.addClass('count').css({"background-color":"#ccc"}).html(s+"s后重新发送");
            var count = setInterval(function(){
                s--;
                btn.html(s+"s后重新发送");
            },1000);
            setTimeout(function(){
                clearInterval(count);
                btn.removeClass("count").css({"background-color":""}).html("重新发送");
            },60000);
        }
    }
    $('.verify-btn').live('click',function(){
        var phone = $('.center input').val().trim();
        if(phone == "" || phone == null){
            alert("请输入手机号！");
            return
        }
        if(!/^1[34578]{1}[0-9]{9}$/.test(phone)){
            alert("电话格式不正确，请重新输入！");
            return
        }
        jishi()
    });
    $('.btn button').click(function(){

    })
</script>
</html>